<template>
	<view class="statistics-wrap">
		<view class="statistics-top">
			<sub-navigation v-if="orgLv!=='jxs'&&orgLv!=='dxy'">
				<!-- <as-date-picker v-model="date"></as-date-picker> -->
				<text class="h2">级别选择</text>
				<view class="flex-row flex-c-center" @tap="lvlPopupShow=true">
					<text class="h3-g lvllabel">{{lvlName}}</text>
					<i class="iconfont iconxiangyou"></i>
				</view>
			</sub-navigation>
			<view class="as-charts flex-column flex-c-stretch">
				<view class="flex-row flex-m-between head-title">
					<text class="h2 p">产品销售量</text>
					<image class="img-40" src="~@/static/img/date.png" mode="aspectFit" @tap="datePopupShow=true"></image>
				</view>
				<!-- <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas> -->
				<scroll-view v-if="num>0" class="scroll-view_H" scroll-x="true">
					<canvas canvas-id="canvasColumn" id="canvasColumn" :style="{width:chartWidth+'px'}"
						class="charts"></canvas>
				</scroll-view>
				<text v-if="num===0" class="chart-empty-tip ">暂无数据</text>
			</view>
		</view>
		<mescroll-uni :top="scrollTop" ref="mescrollRef" @up="loadList" @init="mescrollInit" @down="downCallback">
			<view class="as-list">
				<view class="tools-view">
					<!-- <as-subject-picker :hasAll="true"></as-subject-picker> -->
					<text class="h2 p">产品销售统计</text>
				</view>
				<view class="flex-row flex-m-between">
					<text class=" cell h5-g flex40">产品名称(物料码)</text>
					<text class=" cell h5-g flex20">购买人数</text>
					<text class=" cell h5-g flex20">售出数量</text>
					<text class=" cell h5-g flex20">金额</text>
				</view>
				<view v-for="(item,index) in dataList" :key="index"
					class="flex-row {flex-m-between flex-c-center neumorphism info-row">
					<!-- <text class=" flex30 h3 flex-m-between white-wrap" >{{item.goodsName+'('+item.goodsMatcode+')'||''}}</text> -->
					<view class="flex40 flex-column flex-c-stretch white-wrap">
						<text class="flex1 h3 white-wrap">{{item.goodsName||''}}</text>
						<text class="flex1 h3 white-wrap">{{item.goodsMatcode||''}}</text>
					</view>
					<text class=" flex20 h3">{{item.memberNum}}</text>
					<text class=" flex20 h3">{{item.goodNum}}</text>
					<text class=" flex20 h3 fw">{{formatRMB(item.amount)}}</text>
				</view>
			</view>
		</mescroll-uni>
		<date-popup @determine='determine' :beginDate="beginDate" :endDate="endDate" :popupShow='datePopupShow' @colosePopup='datePopupShow=false'></date-popup>
		<!-- 	<mx-date-picker :show="datePopupShow"  type="range" :value="dateValue" :show-tips="true"
			:show-seconds="true" @confirm="onSelected" @cancel="onSelected" /> -->
		<lvl-picker :popupShow="lvlPopupShow" @change="changeLvl" @search="doSearchByLvl"
			@colosePopup="lvlPopupShow=false">
		</lvl-picker>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import uCharts from '@/packageC/static/u-charts/u-charts.js'
	import subNavigation from '../../components/sub-navigation/sub-navigation.vue';
	import lvlPicker from '../../components/lvl-picker/lvl-picker.vue';
	// import MxDatePicker from "@/packageC/components/mx-datepicker/mx-datepicker.vue";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import chartMixin from "../../common/chart-mixin/chart-mixin.js";
	import datePopup from "../../components/char-date-picker/chart-date-picker.vue";
	var canvaColumn = null;
	export default {
		mixins: [MescrollMixin, chartMixin],
		data() {
			return {
				num:10,
				allTitleList: ["总顾客数", "总产品数", "总订单数", "总金额(元)"],
				allKeyList: ["memberTotal", "goodsTotal", "orderTotal", "amountTotal"],
				columnTitleList: ["时间", "顾客", "产品", "订单", "金额"],
				chartData: {
					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
					series: [{
						name: '成交量A',
						data: [35, 20, 25, 37, 4, 20],
						color: '#000000'
					}, {
						name: '成交量B',
						data: [70, 40, 65, 100, 44, 68]
					}, {
						name: '成交量C',
						data: [100, 80, 95, 150, 112, 132]
					}]
				},
				dataList: [],
				beginDate:null,
				endDate:null,
				scrollTop:'572',
			};
		},
		components: {
			subNavigation,
			lvlPicker,
			// MxDatePicker,
			datePopup
		},
		computed: {},
		onLoad() {
			let today = this.$util.getYearMonthDay(new Date())
			let lastWeek = this.$util.getYearMonthDay(new Date(new Date().getTime() - 7 * 24 * 60 * 60 *
				1000)) // new Date(new Date().getTime() - 7*24 * 60 * 60 * 1000).Format('yyyy-MM-dd')
			this.beginDate = lastWeek
			this.endDate = today
			this.dateValue = [this.beginDate, this.endDate]
			// #ifdef H5
			this.$wechat.noShare();
			// #endif
			this.$nextTick(() => {
				uni.getSystemInfo({
					success: (res) => {
						console.log("getSystemInfo res", res, res.windowWidth, res.windowHeight)
						this.chartWidth = res.windowWidth * 0.9
						// this.chartHeight = res.windowHeight
						this.chartHeight = res.windowWidth * 0.9 * 2 / 3
						this.loadChartData();
					}
				})
			})
			
			if(this.orgLv!=='jxs'&&this.orgLv!=='dxy'){
				this.scrollTop='672'
			}
		},
		methods: {
			loadList(page) {
				// let orgLv=uni.getStorageSync('storeOrgLv')
				const params = {
					current: page.num,
					pageSize: page.size,
					jxsId: this.lvlForm.jxsId, //	经销商编码
					jlId: this.lvlForm.jlId, //	经理编码
					bbzId: this.lvlForm.bbzId, //	本部长编码
					lsId: this.lvlForm.lsId, //	理事编码
					beginDate: this.beginDate, // 	开始时间
					endDate: this.endDate,	// 结束时间
					orgLv:this.orgLv
				}

				this.$http.getProductChartList(params).then((res) => {
					if (res.status === 0 && res.data) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.dataList = []
						};
						this.dataList = this.dataList.concat(curPageData);
					} else {
						this.mescroll.endSuccess(0);
						this.mescroll.endErr();
						uni.showToast({
							icon: 'none',
							title: res.message,
							duration: 2000
						})
					}
				})

			},
			loadChartData() {
				// let orgLv=uni.getStorageSync('storeOrgLv')
				const params = {
					jxsId: this.lvlForm.jxsId, //	经销商编码
					jlId: this.lvlForm.jlId, //	经理编码
					bbzId: this.lvlForm.bbzId, //	本部长编码
					lsId: this.lvlForm.lsId, //	理事编码
					beginDate: this.beginDate, // 	开始时间
					endDate: this.endDate,	// 结束时间
					orgLv:this.orgLv
				}
				this.$http.getProductChart(params).then(res => {
					console.log("getSaleChart===", res)
					if (res.status == 0 && res.data) {
						let Column = {
							categories: [],
							series: []
						};
						this.chartData = res
							.data //  {"amount":["2100.00","1000.00","30.00"],"goodsName":["CX测试用商品(CX111111)","chen4/10(chen2222)","订单测试用商品~~~~~~~~(DDCSSP01)"]} //res.data
						// Column.categories=this.chartData.goodsName
						let goodsName = this.chartData.goodsName || []
						Column.categories = goodsName.map((v, index) => {
							if (v.length > 10) {
								return v.substr(0, 4) + '...'
							} else {
								return v
							}
						})
						Column.series[0] = {
							name: '',
							data: this.chartData.amount || [],
							// color: '#000000'
						}
						this.showColumn("canvasColumn", Column)
					} else {
						this.showColumn("canvasColumn", {
							categories: [],
							series: []
						})
					}
				})
			},
			showColumn(canvasId, chartData) {
				var num = chartData.categories.length;
				this.num = num
				this.chartWidth = num >= 6 ? uni.upx2px(num * 125) : uni.upx2px(6 * 125 * 0.9)
				canvaColumn = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'column',
					fontSize: 11,
					// "canvas2d": true,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					// colors: ['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#90ed7d'],
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
						// format:(val)=>{return val+'元'},
						axisLabel: {
							// interval:0,
							// formatter: function (value, index) {
							// 	console.log("!!!!!!!!!!value%%%%%%%",value);
							// 	  if(value.length>10){
							// 		return value.substr(0,5)+'...'
							// 	  }else{
							// 		return value
							// 	  }
							// }
						}
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						// min:10,
						// max:180,
						// title:"人民币",
						// format:(val)=>{return val.toFixed(0)+'元'},
						"showTitle": true,
						"data": [{
							"position": "left",
							"disabled": false,
							"axisLine": true,
							"axisLineColor": "#CCCCCC",
							"calibration": false,
							"fontColor": "#666666",
							"fontSize": 12,
							"textAlign": "right",
							"title": "人民币(元)",
							"titleFontSize": 13,
							"titleFontColor": "#666666",
							"min": 0,
							"max": null,
							"tofix": null,
							"unit": "",
							"format": ""
						}, ]
					},
					dataLabel: true,
					width: this.chartWidth,
					height: this.chartHeight,
					extra: {
						column: {
							width: 20,
							// "type": "group",
							// // "width": 300,
							// "seriesGap": 2,
							// "barBorderCircle": false,
							// "linearType": "custom",
							// "linearOpacity": 1,
							// "colorStop": 0,
							// "meterBorde": 1,
							// "meterFillColor": "#FFFFFF",
							// "activeBgColor": "#000000",
							// "activeBgOpacity": 0.08

						}
					},
					"tooltip": {
						"showBox": true,
						"showArrow": false,
						"borderWidth": 0,
						"borderRadius": 0,
						"borderColor": "#000000",
						"borderOpacity": 0.7,
						"bgColor": "#000000",
						"bgOpacity": 0.7,
						"gridType": "solid",
						"dashLength": 4,
						"gridColor": "#CCCCCC",
						"fontColor": "#FFFFFF",
						"splitLine": true,
						"horizentalLine": false,
						"xAxisLabel": false,
						"yAxisLabel": false,
						"labelBgColor": "#FFFFFF",
						"labelBgOpacity": 0.7,
						"labelFontColor": "#666666"
					},
					legend: {
						show: false
					},
					"dataLabel": false,
				});
			},
		},
	}
</script>

<style lang="scss">
	@import "../../common/statistics.scss";

	.charts {
		//width: 90vw;
		// height: 90vw*2/3;
		width: 100vw;
		height: 100%;
		background-color: #FFFFFF;
	}
	
</style>
